<template>
  <view class="theme-item">
    <navigator
      :url="`/pages/classifyList/classifyList?id=${classifyId}&name=${name}`"
      class="box"
      v-if="!isMore"
      ref="imageRef"
    >
      <!-- <uv-image
        class="pic"
        :src="picurl"
        mode="aspectFill"
        :observeLazyLoad="true"
        width="100%"
        height="100%"
      /> -->
      <view class="observe">
        <image class="pic" v-if="showImage" :src="picurl" mode="aspectFill" />
      </view>
      <view class="mask">{{ name }}</view>
      <view
        class="tab"
        v-if="Date.now() - updateTime < 1000 * 60 * 60 * 24 * 30 * 3"
      >
        <uni-dateformat
          format="yyyy/MM/dd"
          :date="updateTime"
          :threshold="[1000 * 60, 1000 * 60 * 60 * 24 * 30 * 3]"
        ></uni-dateformat
        >更新
      </view>
    </navigator>
    <navigator
      url="/pages/classify/classify"
      open-type="reLaunch"
      class="box more"
      v-else
    >
      <image class="pic" src="@/common/more.jpg" mode="aspectFill" />
      <view class="mask">
        <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
        <text class="text">更多</text>
      </view>
    </navigator>
  </view>
</template>

<script lang="ts" setup>
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { ref, onMounted, onUnmounted, nextTick } from "vue";

interface Props {
  isMore?: boolean;
  name?: string;
  picurl?: string;
  updateTime?: number;
  classifyId?: string;
  observeShow?:
    | {
        thresholdValue: number;
      }
    | boolean;
}
const props = withDefaults(defineProps<Props>(), {
  isMore: false,
});

const showImage = ref(!props.observeShow);
const imageRef = ref(null);
let observer: UniNamespace.IntersectionObserver | null = null;

const initObserver = () => {
  if (!imageRef.value || showImage.value) {
    return;
  }
  observer = uni.createIntersectionObserver(imageRef.value);
  observer.relativeToViewport({
    bottom:
      typeof props.observeShow === "boolean"
        ? 0
        : props.observeShow?.thresholdValue || 0,
  });
  observer.observe(".observe", (res) => {
    if (res.intersectionRatio > 0) {
      showImage.value = true;
      observer!.disconnect();
    }
  });
};

onMounted(() => {
  initObserver();
});

onUnmounted(() => {
  observer?.disconnect();
});
</script>

<style lang="scss" scoped>
.theme-item {
  .box {
    position: relative;
    height: 340rpx;
    border-radius: 10rpx;
    overflow: hidden;
    .observe {
      width: 100%;
      height: 100%;
    }
    .pic {
      width: 100%;
      height: 100%;
    }

    .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70rpx;
      background-color: rgba(0, 0, 0, 0.2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(15px);
      font-weight: 600;
      font-size: 30rpx;
    }

    .tab {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(250, 129, 90, 0.7);
      backdrop-filter: blur(15px);
      color: #fff;
      font-size: 22rxp;
      padding: 6rpx 14rpx;
      border-radius: 0 0 20rpx 0;
      // 缩放
      transform: scale(0.8);
      transform-origin: left top;
    }
  }

  .box.more {
    .mask {
      display: flex;
      flex-direction: column;
      height: 100%;

      .text {
        font-size: 28rpx;
      }
    }
  }
}
</style>
